<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row show-grid">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Create an Event</h5>

                    <div ibox-tools></div>
                </div>

                <div class="ibox-content">
                    <div class=" form-group"><label>Title</label> <input type="text"
                                                                         ng-model="createdEvent.title"
                                                                         placeholder="Enter a Title for your event"
                                                                         class="form-control"
                                                                         required="">
                    </div>
                    <div class=" form-group"><label>Details</label>
                                                                    <textarea
                                                                            placeholder="Enter a details for your event"
                                                                            ng-model="createdEvent.description"
                                                                            class="form-control"></textarea>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="form-group"><label>Just For: </label>

                        <div class="radio"><label> <input type="radio" value="friends" id="friendsRadio"
                                                          ng-checked="true"
                                                          name="privacyRadios"
                                                          ng-model="createdEvent.eventPrivacy">Friends</label>
                        </div>
                        <div class=" radio"><label> <input type="radio" value="public" id="publicRadio"
                                                           name="privacyRadios"
                                                           ng-model="createdEvent.eventPrivacy">Public</label>
                        </div>
                        <select class="form-control MultiSelect" data-placeholder="Roles"
                                ng-model="createdEvent.eventRoles"
                                ng-options="roles for roles in eventRoles" multiple="multiple" multiselect-dropdown>
                        </select>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class=" form-group"><label>Place</label> <input type="text"
                                                                         placeholder="Enter a location for your event"
                                                                         ng-model="createdEvent.eventLocation"
                                                                         class="form-control"
                                                                         required="">
                    </div>
                    <div class=" form-group"><label>Time</label>

                        <div class='input-group date'>
                            <input type='datetime' class='form-control' date-time
                                   view='date'
                                   ng-model="createdEvent.eventDate"
                                   required=""><span
                                class='input-group-addon'><i class='fa fa-calendar'></i></span></div>
                    </div>
                </div>

                <div class="ibox-content">
                    <freebase-tags tag-context="createdEvent.eventTagContext"
                                   is-create='isCreateObject'></freebase-tags>
                </div>

                <div class="ibox-content">
                    <div class="form-group"><label>User Field Name</label> <input type="text" ng-model="userFieldName"
                                                                                  placeholder="Enter User Field Name"
                                                                                  class="form-control"></div>

                    <div class="checkbox"><label> <input icheck type="checkbox" ng-click="updateSelection($event)">Use
                        Custom Types</label></div>
                    <select chosen id="types" class="chosen-select" style="width:350px;" tabindex="4"
                            ng-model="userFieldType" ng-options="value.name for value in types">
                    </select>
                    <button class="btn btn-primary" ng-click="createUserField()">Create Group User Addable Field
                    </button>
                    <div>
                        <script type="text/ng-template" id="field_renderer.html">
                            <div ui-tree-handle class="tree-node tree-node-content">
                                <a class="pull-right btn btn-white btn-xs" data-nodrag
                                   ng-click="removeUserField(node)"><span class="fa fa-trash"></span></a>

                                <div>{{node.name}}(Type:{{node.type.name}})</div>
                            </div>
                        </script>
                        <div ui-tree id="tree-root">
                            <ol ui-tree-nodes ng-model="createdEvent.fields">
                                <li ng-repeat=" node in createdEvent.fields" ui-tree-node
                                    ng-include="'field_renderer.html'"></li>
                            </ol>
                        </div>
                    </div>
                </div>

                <br>

                <div class="ibox-content">
                    <section ng-controller="TabCtrl">


                        <tabset>
                            <tab ng-click="selectTab(1)">
                                <tab-heading>
                                    Comments
                                </tab-heading>

                            </tab>
                        </tabset>


                        <div class='form-group' ng-show="isSelected(1)">

                            <comment-template item-comment="createdEvent.eventComments"></comment-template>
                        </div>

                    </section>
                </div>
            </div>
        </div>


        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Custom Types</h5>

                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <tabset>
                        <tab ng-repeat=" value in $root.MainCtrlRef.currentUserData.customTypes">
                            <tab-heading>
                                {{value.name}}<a class="pull-right btn btn-white btn-xs" data-nodrag
                                                 ng-click="removeTab(value)"><span class="fa fa-trash"></span></a>
                            </tab-heading>
                            <type-template type-parameter="value"></type-template>
                        </tab>
                        <button class="btn btn-w-m btn-primary" ng-click="addCustomType()"><i class="fa fa-plus"></i>
                            Add Type
                        </button>
                    </tabset>
                </div>
            </div>
        </div>

        <form class="col-lg-12" ng-submit="saveEventData()">
            <button type="submit" class="btn btn-primary btn-sm btn-block"><i class="fa fa-save"></i> Save Your
                Changes
            </button>
        </form>
    </div>
</div>

